<!--                                                                      
    Designer   : Renyangang               
                                                                            
    Licensed under the Apache License, Version 2.0 (the "License");         
    you may not use this file except in compliance with the License.        
    You may obtain a copy of the License at                                 
                                                                            
        http://www.apache.org/licenses/LICENSE-2.0                          
                                                                            
    Unless required by applicable law or agreed to in writing, software    
    distributed under the License is distributed on an "AS IS" BASIS,       
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and     
    limitations under the License. 
-->
<template>
    <div class="form-container">
        <n-button type="primary" class="back" @click="back">
            <template #icon>
                <n-icon><ChevronBackOutline /></n-icon>
            </template>
            Back
        </n-button>
        <n-button type="primary" class="save" @click="save">Save</n-button>
        <n-button type="primary" class="saveas" @click="saveAs">Save As</n-button>
        <n-button type="primary" class="load" @click="load">Load</n-button>
        <h3>Soc Settings</h3>
        <n-tabs v-model:value="curTab" size="small" type="segment" animated>
            <n-tab-pane name="devsetting" tab="device parameters" display-directive="show">
                <Devices ref="devices" v-model:soc-setting="socLocalConfig" />
            </n-tab-pane>
            <n-tab-pane name="pinsetting" tab="pins mapping" display-directive="if">
                <PinMapping ref="pinmapping" v-model:soc-setting="socLocalConfig" />
            </n-tab-pane>
        </n-tabs>
</div>
  </template>
  
<script lang="ts" setup>
  import { ref,onMounted } from 'vue'
  import { NTabs, NTabPane, NButton,NIcon } from 'naive-ui'
  import { useMessage } from 'naive-ui'
  import { ChevronBackOutline } from '@vicons/ionicons5'
  import { useRouter } from 'vue-router'
  import { boardConfigStore } from '@/stores/boardconfig'
  import { soc } from '../../wailsjs/go/models'
  import { WindowCenter, WindowGetSize,WindowSetSize } from '../../wailsjs/runtime'
  import type { Size } from '../../wailsjs/runtime'
  import type { BoardConfig } from '@/scripts/compones';
  import Devices from '@/components/settings/Devices.vue'
  import PinMapping from '@/components/settings/PinMapping.vue'

  const message = useMessage();

  const curSize = ref<Size>();
  const devices = ref<typeof Devices>()

  const curTab = ref('devsetting')
  const router = useRouter()
  const boardConfig = boardConfigStore()
  const localBoardConfig = ref<BoardConfig>()

  const socLocalConfig = ref<soc.SocConfig>({
    Name: "default_soc",
    convertValues: ()=>{},
    PinMaps: [],
  });

  onMounted(async () => {
    curSize.value = await WindowGetSize()
    WindowSetSize(1200, 800)
    WindowCenter();
    localBoardConfig.value = boardConfig.boardConfig!;
    socLocalConfig.value =  await boardConfig.getSocConfig()
    console.log(socLocalConfig.value)
  })

  const back = async () => {
    await WindowSetSize(curSize.value!.w, curSize.value!.h)
      router.back();
  }

  const verify = async () => {
    let verification = await devices.value?.verification()
    if (!verification) {
        curTab.value = 'devsetting'
        return false
    }
    if (!localBoardConfig.value) {
        message.error('localBoardConfig is undefined')
        return false
    }
    localBoardConfig.value.socConfigJson = JSON.stringify(socLocalConfig.value);
    return true
  }
  
  const save = async () => {
    if (await verify()) {
        await boardConfig.setBoardConfig(localBoardConfig.value!);
        message.success('Successfully Saved')
        back();
    }
  }

  const saveAs = async () => {
    if (await verify() && await boardConfig.saveConfigFile(localBoardConfig.value!)) {
        message.success('Successfully Saved')
    }
  }

  const load = async () => {
    await boardConfig.loadConfig();
    localBoardConfig.value = boardConfig.boardConfig!;
    socLocalConfig.value =  await boardConfig.getSocConfig()
  }

  </script>

<style lang="scss" scoped>
.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100vh;
    width: 100%;
    background-color: var(--fv-c-light-back);
    padding: 10px;
    box-sizing: border-box;
    h3 {
        font-weight: 700;
        color: var(--fv-c-green);
    }
    .back {
        display: flex;
        position: absolute;
        top: 10px;
        left: 10px;
        flex-direction: row;
        justify-content: start;
        width: 5.5rem;
        height: 1.6rem;
        font-size: 1rem;
        line-height: 2rem;
        align-items: center;
        z-index: 10;
        n-icon{
            color: var(--fv-c-text-white);
            font-size: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            svg {
                width: 1rem;
                height: 1rem;
            }
        }
    }
    .n-tabs{
        margin-top: 5px;
    }
    .save {
        position: absolute;
        top: 10px;
        left: calc(20px + 5.5rem);
        width: 4.5rem;
        height: 1.6rem;
        z-index: 10;
    }
    .saveas {
        position: absolute;
        top: 10px;
        left: calc(30px + 10rem);
        width: 4.5rem;
        height: 1.6rem;
        z-index: 10;
    }
    .load {
        position: absolute;
        top: 10px;
        left: calc(40px + 14.5rem);
        width: 4.5rem;
        height: 1.6rem;
        z-index: 10;
    }
}
</style>